<template>
	<coreshop-page title="提货单核销" mode="left">
		<view class="p-25">
			<view class="search-box">
				<uv-search v-model="state.id" :showAction="true" actionText="搜索" @custom="handleSearch"></uv-search>
			</view>


			<view class="goods-box" v-if="Object.keys(state.ticket).length > 0">
				<view class="item-box">
					<view class="order-num">
						<view class="id">
							<text class="tit">服务单号：{{state.ticket.serviceOrderId}} </text>
						</view>
						<view class="status">
							<uv-tags v-if="state.ticket.status == TicketEnum.normal" text="正常" plain size="mini"
								type="success"></uv-tags>
							<uv-tags v-if="state.ticket.status == TicketEnum.expire" text="过期" plain size="mini"
								type="error"></uv-tags>
							<uv-tags v-if="state.ticket.status == TicketEnum.error" text="作废" plain size="mini"
								type="primary"></uv-tags>
							<uv-tags v-if="state.ticket.status == TicketEnum.complete" text="已核销" plain size="mini"
								type="info"></uv-tags>
						</view>
					</view>
					<view class="goods">
						<view class="item">
							<image class="img" :src="state.service.thumbnail" mode=""></image>
							<view class="msg-box">
								<view class="title">{{state.service.title}}</view>
								<view class="type">否核销：{{state.ticket.isVerification?'是':'否'}}</view>
								<view class="type">有效状态：{{state.ticket.validityType==1?'长期有效':'限定消费时间'}}</view>
								<view class="delivery">服务券状态：{{ state.ticket.statusStr }}</view>
							</view>
						</view>
					</view>
					<view class="btn-box">
						<view class="time-box" v-if="state.ticket.validityStartTime && state.ticket.validityEndTime">
							可核销时间：{{timeFormat(state.ticket.createTime, 'mm-dd hh:MM:ss')}}
						</view>
						<view class="time-box">
							下单时间：{{timeFormat(state.ticket.createTime, 'mm-dd hh:MM:ss')}}
						</view>
						<view class="time-box" v-if="state.ticket.verificationTime">
							核销时间：{{timeFormat(state.ticket.verificationTime, 'mm-dd hh:MM:ss')}}
						</view>
						<uv-checkbox-group v-if="!state.ticket.status" v-model="state.ticket.checkboxValue" :size="25"
							activeColor="#D33123" :customStyle="{'flex':'none'}">
							<uv-checkbox :name="state.ticket.redeemCode"></uv-checkbox>
						</uv-checkbox-group>
					</view>
				</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
			</view>

			<view class="qrcode" @click="handleQrcode">
				<uv-icon name="scan" color="#e54d42" size="40"></uv-icon>
			</view>

			<coreshop-fixed-bottom-button :radius="100" title="确认核销"
				@onClick="handleConfirm"></coreshop-fixed-bottom-button>
		</view>
	</coreshop-page>

</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { queryServiceVerificationTicketInfo, queryVerificationTicket } from '@/core/api';
	import type { Response } from '@/core/models';
	import { handleShowToast } from '@/core/utils';
	import { EmptyEnum, TicketEnum } from '@/core/enum';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

	interface QueryParams {
		id : string;
	}

	const state = reactive<{
		ticket : any;
		service : any;
		serviceOrder : any;
		id : string;
	}>({
		ticket: {},
		service: {},
		serviceOrder: {},
		id: '',
	})

	onLoad((query : QueryParams) => {
		state.id = query?.id || '';
		getServiceVerificationTicketInfo();
	});


	/** 搜索 */
	const handleSearch = () => {
		if (!state.id) {
			handleShowToast("请输入核销码")
			return;
		}
		getServiceVerificationTicketInfo();
	}

	const getServiceVerificationTicketInfo = async () => {
		const ladingInfo : Response<any> = await queryServiceVerificationTicketInfo({ id: state.id });
		if (ladingInfo.status) {
			state.ticket = ladingInfo.data.ticket;
			state.service = ladingInfo.data.service;
			state.serviceOrder = ladingInfo.data.serviceOrder;
			state.ticket['checkboxValue'] = [`${ladingInfo.data.ticket?.redeemCode}`];
		}
	}

	/** 确认核销 */
	const handleConfirm = async () => {
		if (state.ticket.checkboxValue.length == 0) {
			handleShowToast('请选择要核销的订单'); return;
		}

		const lading : Response<any> = await queryVerificationTicket({
			id: state.ticket.checkboxValue[0],
		});
		if (lading.status) {
			handleShowToast(lading.msg, 'success', () => {
				getServiceVerificationTicketInfo();
			});
		} else {
			handleShowToast(lading.msg);
		}
	}

	/** 扫一扫 */
	const handleQrcode = () => {
		uni.scanCode({
			onlyFromCamera: true,
			success: function (res : any) {
				state.id = res.result;
				getServiceVerificationTicketInfo();
			}
		});
	}
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>